<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./JavaScript/jquery-3.7.1.js"></script>
    <script>
      $(function () {
        // 设置全选并且让其小按钮同步大按钮的全选,
        //先获取需要用到元素,然后我们通过获取大按钮的checked属性的状态,来设置下面全部小按钮的状态
        var $checkboxAll = $('#checkbox-All');
        var $hobbies = $('[name=hobby]');
        $checkboxAll.click(function () {
          // 利用this,这里的this代表的是绑定事件的对象,在jQuery中是一样的,利用其属性来绑定
          $hobbies.prop('checked', this.checked);
        });
        $hobbies.click(function () {
          // 使其同步,设置大的checked属性为
          // 所有的小按钮都没有被选中就返回true 然后取反 = 所有按钮被选中的时候=true
          $checkboxAll.prop('checked', !$hobbies.is(':not(:checked)'));
        });
        // 全选直接让其大按钮√
        var $All = $('#All');
        $All.click(function () {
          $checkboxAll.prop('checked', true);
          $hobbies.prop('checked', true);
        });
        var $Del = $('#Del');
        $Del.click(function () {
          $checkboxAll.prop('checked', false);
          $hobbies.prop('checked', false);
        });
        var $reverse = $('#reverse');
        // 可以利用回调函数来实现,当不知道里面会返回什么参数的时候,可以利用数组办法展开遍历,再log查看
        // 然后利用return返回自己想要的值.
        $reverse.click(function () {
          $hobbies.prop('checked', function (index, oldValue) {
            return !oldValue;
          });
          $checkboxAll.prop('checked', !$hobbies.is(':not(:checked)'));
        });
        // each()用来遍历jQuery元素,需要一个函数作为参数
        //          函数会执行多次,每次都会将当前元素设置为函数中的this
        $('#send').click(function () {
          $hobbies.filter(':checked').each(function () {
            alert(this.value);
          });
        });
      });
    </script>
  </head>
  <body>
    <div class="outer">
      <form action="#">
        <div class="form-head">
          <!-- 头部文字,告诉内容 -->
          选择你的爱好
          <input type="checkbox" name="head-input" id="checkbox-All" />全选
        </div>
        <div class="form-input">
          <input type="checkbox" name="hobby" value="兵乒球" />兵乒球
          <input type="checkbox" name="hobby" value="羽毛球" />羽毛球
          <input type="checkbox" name="hobby" value="足球" />足球
          <input type="checkbox" name="hobby" value="篮球" />篮球
        </div>
        <div class="form-btn">
          <button id="All">全选</button>
          <button id="Del">取消</button>
          <button id="reverse">反选</button>
          <button id="send">提交</button>
        </div>
      </form>
    </div>
  </body>
</html>
